<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多文件上传</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <style type="text/css">
    </style>
</head>

<body role="document" youdao="bind">
<!-- <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Max.Wang</a>
        </div>
          </div>
</nav> -->
<div class="container theme-showcase" role="main">
    <br>
    <!-- Main jumbotron for a primary marketing message or call to action -->
<!--     <div class="page-header">
        <h3>多文件上传</h3>
    </div> -->
    <P>
<!-- 
    <form id="uploadForm" name="uploadForm" enctype="multipart/form-data" action="/upload" method="POST">
        <input type="file" id="userfile" name="userfile" multiple/> <br/>
    </form>
    <button type="button" class="btn btn-primary" onclick="UpLoadFile()">上传文件</button>
    <p>

    <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0"
             aria-valuemax="100" style="width: 0%" id="myprogress"><span class="sr-only">0% Complete</span></div>
    </div> -->
    </p>
    </P>
    <div class="row">
        <div class="col-md-6">
            <table class="table table-striped" id="datas">
                <thead>
                <tr>
                    <th>#</th>
                    <th>名称</th>
                    <th>大小(KB)</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody>
                <tr id="mytemplate">
                    <td id="NO"></td>
                    <td id="Name"></td>
                    <td id="Size"></td>
                    <td id="Operation"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <button type="button" class="btn btn-danger" onclick="DelFile()">删除选中的文件</button>
</div>

<!-- /container -->
<script src="static/js/jquery-2.1.3.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script>
    $(function () {
        ListFile();
    });
    function DelFile() {
        var filename = new Array();
        $(".mycheckbox").each(function () {
            if ($(this).is(':checked')) {
                //   console.log($(this).val())
                filename.push($(this).parent().prev().prev().text());
            }
        });
        if (filename.length < 1) return;   //没有选择时退出
        var o = new Object();
        o.filename = filename;
        $.ajax({
            type: 'DELETE',
            url: "/file",
            data: JSON.stringify(o),
            contentType: 'application/json',
            success: function (msg) {
                // console.log(msg);
                ListFile();
            },
            error: function () {
                alert("删除文件出错");
            }
        });
    }
    function ListFile() {
        $(".myrow").remove();
        $.ajax({
            type: "GET",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "/file",//要访问的后台地址
            cache: false,
            success: function (msg) {//msg为返回的数据，在这里做数据绑定
                // console.log(msg);
                $("#mytemplate").show();
                $.each(msg, function (i, n) {
                    var row = $("#mytemplate").clone();
                    row.addClass("myrow");
                    row.find("#NO").text(i);
                    row.find("#Name").html("<a href='/files/" + n.name + "'>" + n.name + "</a>");
                    row.find("#Size").text(n.size);
                    row.find("#Operation").html("<input class='mycheckbox'type='checkbox' value='" + i + "'>");
                    row.appendTo("#datas");//添加到模板的容器中
                });
                $("#mytemplate").hide();   //隐藏模板
            },
            error: function () {
                alert("连接服务器错误");
            }
        });
    }
    function UpLoadFile() {
        // FormData 对象
        var form = new FormData(document.forms.namedItem("uploadForm"));
        //form.append("name", "dd");                        // 可以增加表单数据
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", "/file", true);
        // xhr.upload 这是html5新增的api,储存了上传过程中的信息
        xhr.upload.onprogress = function (ev) {
            var percent = 0;
            if (ev.lengthComputable) {
                percent = 100 * ev.loaded / ev.total;
                $("#myprogress").width(percent + "%");
            }
        };
        xhr.onload = function (oEvent) {
            if (xhr.status == 200) {
                ListFile();
            }
        }
        xhr.send(form);
    }
</script>
</body>

</html>